<template>
  <div class="AddResponseExample">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <a-form-model-item class="input" label="示例名称" prop="name">
        <a-input v-model="form.name" @focus="showNameList = true" @blur="showNameList = false"></a-input>
        <div v-show="showNameList" class="nameList">
          <div @mousedown="changeName(name)" class="item" v-for="name in nameList">
            {{name}}
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="返回数据">
        <div class="content">

        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: "AddResponseExample",
  data() {
    return{
      form: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: '请输入示例名称', trigger: 'change' }]
      },
      nameList: ['成功示例', '异常示例'],
      showNameList: false
    }
  },
  methods: {
    changeName(name) {
      this.form.name = name
    },
    submit() {
      let isValid
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>
.AddResponseExample{
  .input{
    position: relative;
    .nameList{
      position: absolute;
      top: 32px;
      width: 100%;
      height: 80px;
      overflow-y: auto;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
      padding: 5px;
      box-shadow: 0px 3px 18px 0px rgba(0,0,0,0.05);
      z-index: 1000;
      background-color: white;
      .item{
        width: 100%;
        height: 30px;
        padding: 0 15px;
        line-height: 30px;
        border-radius: 5px;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        &:hover{
          background-color: #f0fcff;
          color: #2BAEF2;
        }
      }
    }
  }
  .content{
    height: 300px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
  }
}
</style>